<template>
    <div class="divBox relative">
      <el-card class="box-card">
        <div  class="clearfix">
          <div class="container">
            <el-form size="small" label-width="100px">  
              <el-form-item label="订单状态：" >
                <el-radio-group v-model="tableFrom.status" type="button" @change="seachList">
                  <el-radio-button label="0">待报价</el-radio-button>
                  <el-radio-button label="1">待支付定金</el-radio-button>
                  <el-radio-button label="2">待支付尾款</el-radio-button>
                  <el-radio-button label="3">待评价</el-radio-button>
                  <el-radio-button label="4">已完成</el-radio-button>
                  <el-radio-button label="5">已退款</el-radio-button>
                  <el-radio-button label="-1">已取消</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="包车类型：">
                <el-select v-model="tableFrom.type" placeholder="请选择包车状态" class="selWidth"  @change="seachList">
                  <el-option label="所有" value="" ></el-option>
                  <el-option label="单程" :value="1" ></el-option>
                  <el-option label="往返" :value="2" ></el-option>
                  <el-option label="包天" :value="3" ></el-option>
                </el-select>
              </el-form-item>
      
              <el-form-item label="关键字：" class="width100">
                  <el-input v-model="tableFrom.keywords" placeholder="请输入包车人姓名、手机号" class="selWidth" size="small" clearable>
                  <el-button slot="append" icon="el-icon-search" size="small" @click="seachList" />
                </el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-card>
  
      <el-card class="box-card">
         <el-table
          v-loading="listLoading"
          :data="tableData.data"
          size="mini"
          class="table"
          highlight-current-row
        >
    
          <el-table-column
            prop="baoche_id" 
            label="包车ID"
            min-width="100"
           :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
          prop="type_desc"
          label="包车类型"
          min-width="60"
          :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="name"
            label="姓名"
            min-width="60"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="phone"
            label="手机号"
            min-width="100"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="origin"
            label="出发地"
            min-width="100"
          />
          <el-table-column
            prop="destination"
            label="目的地"
            min-width="100"
          />
          <el-table-column
            prop="car_type"
            label="用车类型"
            min-width="100"
          />
          <el-table-column
            prop="people_sum"
            label="用车人数"
            min-width="50"
          />
          <el-table-column
            prop="go_time_desc"
            label="出发时间"
            min-width="100"
          />
          <el-table-column
            prop="back_time_desc"
            label="返程时间"
            min-width="100"
          />
          <el-table-column
            prop="days"
            label="用车天数"
            min-width="50"
          />
          <el-table-column
            prop="status_desc"
            label="状态"
            min-width="50"
          />
          <el-table-column
            prop="price"
            label="总报价"
            min-width="80"
            />
            <el-table-column
            prop="t_price"
            label="定金"
            min-width="50"
            />
            <el-table-column
            prop="w_price"
            label="尾款"
            min-width="50"
            />
        
          <el-table-column label="操作" min-width="150" fixed="right" align="center" :render-header="renderHeader">
             <template slot-scope="scope">
                <a style="color:#007AFF;margin-right:10px" v-if="scope.row.status==0" @click="baojia(scope.row)">立即报价</a>
                <!-- <el-divider v-if="scope.row.paid==1&&scope.row.status==0"  direction="vertical"></el-divider> -->
                <a  style="color:#007AFF" v-if="scope.row.paid!=0||scope.row.paid!=-1" @click="payListClick(scope.row)">支付状态</a>
             </template>
          </el-table-column>
        
          
    
        </el-table>
        <div class="block">
          <el-pagination
            :page-sizes="[20, 40, 60, 80]"
            :page-size="tableFrom.limit"
            :current-page="tableFrom.page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.total"
            @size-change="handleSizeChange"
            @current-change="pageChange"
          />
        </div>
      </el-card>
  
  
      <!-- 立即报价 -->
      <el-dialog title="立即报价" :visible.sync="priceListVisible" width="40%" >
        <el-form :model="baoForm" ref="baoForm" :rules="rules" label-width="100px" class="formValidate mt20" >
          <div style="display: flex; flex-direction: column;align-items: center;">
            <el-form-item label="总价："  prop="price">
            <el-input-number :min="0" v-model="baoForm.price"  placeholder="请输入" style='margin-left:15px' />
          </el-form-item>
          <el-form-item label="定金："  prop="t_price">
            <el-input-number :min="0" v-model="baoForm.t_price"  placeholder="请输入" style='margin-left:15px' />
          </el-form-item>
          <el-form-item label="尾款："  prop="w_price">
              <el-input-number :min="0" v-model="baoForm.w_price"  placeholder="请输入" style='margin-left:15px' />
          </el-form-item>
          <el-form-item label="备注："  prop="comment">
            <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入备注车辆详情"
            class="pageWidth"
            size="small"
            v-model="baoForm.comment"
          />
        </el-form-item>
         
          <el-form-item class="acea-row row-center-wrapper">
            <el-button type="primary"  @click="submPriceForm('baoForm')">立即报价</el-button>
            <el-button @click="closePriceForm('baoForm')">取消</el-button>
          </el-form-item>
          </div>
         </el-form>
      </el-dialog>
      <!-- 立即报价 -->
  
      <!-- 查看订单 -->
      <el-dialog title="查看订单" :visible.sync="orderVisible" width="40%" fullscreen>
         <el-table
          v-loading="listLoading"
          :data="orderList"
          style="width: 100%"
          size="mini"
          :highlight-current-row="true"
          :header-cell-style=" {fontWeight:'bold'}"
        >
          <el-table-column label="订单号"
            prop="order_id"
            min-width="100"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="包车ID"
            prop="baoche_id"
            min-width="100"
            :show-overflow-tooltip="true"/>
  
          <el-table-column label="包车类型"
            min-width="60"
            :show-overflow-tooltip="true">
  
             <template slot-scope="scope">
               <span>{{scope.row.order_type ? '尾款' : '定金'}}</span>
             </template>
          </el-table-column>
          <el-table-column label="实付款"
            prop="pay_price"
            min-width="60"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="订单总价"
            prop="total_price"
            min-width="60"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="退款状态"
            min-width="60"
            :show-overflow-tooltip="true">
            <template slot-scope="scope">
                <span>{{!scope.row.refund_status ? '未退款' : '已退款'}}</span>
             </template>
          </el-table-column>
          <el-table-column label="退款金额"
            prop="refund_price"
            min-width="60"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="操作" min-width="150" fixed="right" align="center" :render-header="renderHeader">
             <template slot-scope="scope">
             <a   style="color:#007AFF"  size="small" @click="refundShowClick(scope.row)">退款</a>    
             </template>
          </el-table-column>
        
        </el-table>
      </el-dialog>
      <!-- 查看订单 -->
      <!-- 立即退款 -->
      <el-dialog title="立即退款" :visible.sync="refundShow" width="40%" >
         <el-form :model="refundForm"  ref="refundForm" label-width="100px" class="formValidate mt20" >
            <el-form-item label="订单号："  prop="order_id">
              <el-input v-model="refundForm.order_id" style="width:50%" disabled placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="退款金额：" prop="refund_price">
              <el-input-number  :min="0" :max="Maxprice" v-model="refundForm.refund_price" placeholder="请输入"  />
            </el-form-item> 
            <el-form-item label="备注：" prop="remark">
                <el-input maxlength="100" :show-word-limit="true" type="textarea" style="width:60%"  v-model="refundForm.refund_reason_wap_explain" placeholder="输入退款原因"></el-input>
            </el-form-item>
           
            <el-form-item class="acea-row row-center-wrapper">
              <el-button type="primary"  @click="sumRefund('refundForm')">提交退款</el-button>
              <el-button @click="refundShow=false">取消</el-button>
            </el-form-item>
          </el-form>
      </el-dialog>
      <!-- 立即退款 -->
  
    </div>
  </template>
  
  <script>  
  
    import {baocheLstApi, saveBaochePriceApi, orderBaocheRefundApi }   from "@/api/trip"       
import { comment } from "jszip/lib/defaults";
    export default {
      name: 'orderBuslistDetails',
      components: {
     
      },
      data() {
          return {
            baoForm:{
              baoche_id: '',
              price: 0,
              t_price: 0,
              w_price: 0,
              comment: ''
            },
            orderVisible: false,
            orderList:[],
           
            priceListVisible: false,
            refundShow:false,
            Maxprice:0,
            refundForm:{
              order_id:'',
              refund_price:0,
              refund_reason_wap_explain:''
            },
            rules: {
  
              price: [
                { required: true,type:'number', message: '请输入总价', trigger: 'blur' }
              ],
              t_price: [
                { required: true,type:'number',  message: '请输入定金', trigger: 'blur' }
              ],
              w_price: [
                { required: true,type:'number',  message: '请输入尾款', trigger: 'blur' }
              ]
            },
          
            tableData: {
              data: [],
              total: 0
            },
            listLoading: true,
            tableFrom: {
              page: 1,
              limit: 25,
              status: 0,
              type: "",
              keywords: '',
            },
            proType: 0,
            active:false,
            card_select_show:false,
            checkAll: false,
            columnData: ['包车ID','包车类型','姓名','手机号','出发地','目的地','用车类型','用车人数','出发时间','返程时间','用车天数','状态'],
            isIndeterminate:true
          }
        },
      mounted() {
  
        this.getList();
        // this.getOrderListData();
      },
      methods: {
  
  
  
  
  
        resetFormRefundhandler(){
          this.refundVisible = false
        },
        resetFormRefusehand(){
          this.RefuseVisible = false
        },
        resetForm(formValue) {
          this.dialogVisible = false
        },
       
        seachList() {
          this.tableFrom.page = 1
          this.getList()
        },
       
        payListClick(item){
            this.orderList = item.OrderBaoche
            console.log('item.OrderBaoche',item.OrderBaoche)
            this.orderVisible = true
            // this.listLoading = true
        // getOrderListByBaocheIdApi(item.baocheId).then(res => {
        //   this.listLoading = false
        //   this.orderList = res
        // }).catch(res => {
        //   this.listLoading = false
        //   this.$message.error(res.message);
        // })
  
      },
    
      baojia(item){
        this.priceListVisible = true
        this.baoForm = {
            baoche_id: item.baoche_id,
            price: item.price,
            t_tprice: item.t_tprice?item.t_tprice:0,
            w_price: item.w_price?item.w_price:0,
            comment: ''
        }
      },
    
      // 退款
      refundShowClick(item){
        var price = 0
        if(item.total_price-item.refund_price<=0) {
          price = 0
        } else {
          price = item.total_price-item.refund_price
        }
        this.Maxprice = price
        this.refundForm = {
          order_id:item.order_id,
          refund_price: price,
          refund_reason_wap_explain: ''
        }
        this.refundShow = true
      },
  
      // 提交退款
      sumRefund(){
        if(this.refundForm.refund_price<=0) {
          this.$message.error('退款不能小于等于0')
        } else{
          // console.log(this.refundForm)
          this.$loading();
          orderBaocheRefundApi(this.refundForm).then( (res) => {            
            this.getList();
            this.refundShow = false;
            this.orderVisible = false;
            this.$message.success('退款成功');
            this.$loading().close();    
          }).catch((res) => {
            this.$loading().close();   
              this.$message.error(res.message);
          });
        }
        //TODO
      },
  
  
  
      closePriceForm(formName){
        this.$refs[formName].resetFields();
        this.priceListVisible = false
      },
  
      submPriceForm(formName){
      
          saveBaochePriceApi(this.baoForm).then(res => {
            this.$message.success('报价成功')
            this.$refs[formName].resetFields();
            this.getList();
              this.priceListVisible = false
          }).catch(error => {
            this.$message.error(error.message)
              this.$refs[formName].resetFields();
          })
  
      },
    
       
        // 列表
        getList() {
          this.listLoading = true
          baocheLstApi(this.tableFrom).then(res => {
            this.tableData.data = res.data.list || [];
            this.tableData.total = res.data.count;
            this.listLoading = false
          }).catch((err) => {
            console.log('err',err)
            this.listLoading = false
          })
        },
      
    
        pageChange(page) {
          this.tableFrom.page = page
          this.getList()
        },
        handleSizeChange(val) {
          this.tableFrom.limit = val
          this.getList()
        },
        
        renderHeader(h) {
          return(
            <p>
              <span style="padding-right:5px;">操作</span>
              <i class="el-icon-setting" onClick={()=>this.handleAddItem()}></i>
            </p>
          )
        },
        handleAddItem(){
          if(this.card_select_show){
            this.$set(this,'card_select_show',false);
          }else if(!this.card_select_show){
            this.$set(this,'card_select_show',true);
          }
        },
    
  
      }
  }
  </script>
  <style lang="scss" scoped>
    .el-table__body {
      width: 100%;
      table-layout: fixed !important;
    }
    .demo-table-expand{
      ::v-deeplabel{
        width: 83px !important;
      }
    }
    .refunding{
      span{
        display: block;
      }
    }
    .selWidth{
      width: 300px;
    }
    .el-dropdown-link {
      cursor: pointer;
      color: #409EFF;
      font-size: 12px;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
    .tabBox_tit {
      font-size: 12px !important;
      /*margin: 0 2px 0 10px;*/
      letter-spacing: 1px;
      /*padding: 5px 0;*/
      box-sizing: border-box;
    }
    .text_overflow{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 400px;
    }
    .pup_card{
      width: 200px;
      border-radius: 5px;
      padding: 5px;
      box-sizing: border-box;
      font-size: 12px;
      line-height: 16px;
    }
    .flex-column{
      display: flex;
      flex-direction: column;
    }
    .mt20{
      margin-top:20px
    }
    .relative{
      position: relative;
    }
    .card_abs{
      position: absolute;
      padding-bottom: 15px;
      top:520px;
      right:40px;
      width: 200px;
      background: #fff;
      z-index: 99999;
      box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.1);
    }
    .cell_ht{
      height: 50px;
      padding: 15px 20px;
      box-sizing: border-box;
      border-bottom: 1px solid #eeeeee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .check_cell{
      width: 100%;
      padding:15px 20px 0;
    }
    ::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
      color: #606266;
    }
  
   ::v-deep {
     .el-input-group__prepend{
       width: 100px !important;
     }
   }
    
  </style>
  